<template>
  <!-- 全局组件引入，场景很多页面都用方便复用 -->
  <!--  kebab-case 格式命名 -->
  <global-com
    :value="value"
    :name="name"
    :published="isPublished"
    :commentIds="commentIds"
    :author="author"
    @getValue="getValue"
  >
  </global-com>
  <el-divider></el-divider>
  <!-- PascalCase 格式命名 局部组件-->
  <!-- 
      通讯方法搞明白
      1.传统用的多的属性传值,props接收，emit传出来
      2.v-model
      3.refs方式
      4.provide/inject方式
      5.跨组件利用useAttrs
      https://juejin.cn/post/7069251532339806238
    -->
  <!-- 
    v-model
      <MyChild :num="data.num" :modelValue="data.searchText" @update:modelValue="newValue => data.searchText = newValue" 
        :title="data.bookTitle" @update:title="newValue => data.bookTitle = newValue"
        ></MyChild>
   -->

  <MyChild
    :num="data.num"
    v-model="data.searchText"
    v-model:title="data.bookTitle"
    :msg1="data.msg1"
    :msg2="data.msg2"
    @changeMsg1="
      (val) => {
        data.msg1 = val;
      }
    "
    ref="childRefs"
  ></MyChild>
  <el-button @click="handClick" type="primary">点击通过ref通讯子组件</el-button>
  <ul>
    <li v-for="(item, index) in childRefs?.list" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

<script setup>
import { ref, reactive, toRefs, watchEffect, provide } from "vue";
import MyChild from "./components/MyChild";
// 全局组件数据
const globlaData = reactive({
  value: 1,
  name: "张三",
  isPublished: false,
  commentIds: [1, 2, 3],
  author: { aa: 1 },
});
const { value, name, isPublished, commentIds, author } = toRefs(globlaData);
// 子传父
const getValue = (val) => {
  globlaData.value = val;
};
// 局部组件
const data = reactive({
  num: 2,
  searchText: "input1",
  bookTitle: "input2",
  msg1: "msg1",
  msg2: "msg2",
});
// 3.refs方式通讯
// 子组件必须defineExpose需要暴露的数据或者方法
const childRefs = ref(null);
const handClick = () => {
  childRefs.value.setShow();
};
// 4.provide/inject方式
const info = ref("爷爷组件传过来的值");
provide("info", info);
</script>
